<template>
    
    <!-- 功能区组件：查询、新建、导入 -->

    <!-- 表格数据组件 -->
    <el-table :data="data" >
        <el-table-column class="tableHeader" v-for="(col) in columns" :key="col.index" 
        :label="col.label"
        :prop="col.prop"
        :fixed="col.fixed"
        :width="col.width"
        />
        <!-- 数据操作按钮 -->
        <el-table-column fixed="right" label="操作" min-width="160">
          <template #default="scope" >
            <el-button link type="primary" size="small" @click="onEdit(scope.row.id)" >编辑</el-button>
            <el-button link type="danger" size="small" @click="onDel(scope.row.id)" >删除</el-button>
            <el-button v-if="title==='api'" link type="success" size="small" @click="onRun(scope.row.id)">运行</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- <div class="pagination-block" >
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        page-sizes="[10, 20, 30, 50]"
        size="size"
        disabled="disabled"
        background="background"
        layout="sizes, prev, pager, next"
        total="30"
        />
    </div> -->
        

</template>

<script setup>
import { ref } from 'vue'
import { changeIsEdit } from '@/assets/js/common'

const props = defineProps({
    // 表格数据
    data: {
        type: Object,
        required: true,
        default: () => []
    },
    // 表头配置
    columns: {
        type: Array,
        required: true,
        default: () => []
    },
    title: {
        type: String,
        default: '编辑'
    },
})
// const currentPage = ref('1')
// const pageSize = ref("20")
// const disabled = ref(false)
// const background = ref(false)
// const size = ref("default")

const emit = defineEmits(['optEdit', 'optDel','optSave'])

// 调用父组件方法，查询数据，并更新表单数据
function onEdit(id) {
    changeIsEdit(true)
    emit('optEdit', id);
}

function onDel(id) {
    emit('optDel', id)
}

function onRun(id) {
    console.log("运行接口, 测试ID: ", id)
}

</script>

<style scoped>

.el-table {
    position: fixed;
    margin: 10px 10px;
    width: 90%;
    left: 5%;
    right: 5%;
    top: 100px;
    height: 85%;
    /* display: flex; */
    /* justify-content: center;  */
    border-radius: 5px;
    box-shadow: 0 0.1px 5px rgba(0, 0, 0, 0.1);
    
    /* border: 0.1px solid gray; */
}
.el-table .el-table-column {
    height: 50px;
}

div .el-pagination {
    position: fixed;
    bottom: 30px;
    left: 45%;
}

</style>